<template>
  <div>
    <div class="btn_wrapper">
      <span class="explain"
        >说明：目前仅支持学科，关键字，试题类型和难度条件筛选</span
      >
      <el-button
        type="success"
        icon="el-icon-edit"
        class="btn_add"
        @click="$router.push('/questions/new')"
        >新增试题</el-button
      >
    </div>
    <div class="form">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
        class="el_form"
      >
        <div class="el_col">
          <el-form-item label="学科" class="el_form_item">
            <el-select
              v-model="ruleForm.subjectID"
              placeholder="请选择"
              class="el_select"
              @change="changeXueke"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="二级目录" class="el_form_item">
            <el-select
              v-model="ruleForm.catalogID"
              placeholder="请选择"
              class="el_select"
            >
              <el-option
                v-for="(item, index) in xuekelist"
                :key="index"
                :label="item"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="标签" class="el_form_item">
            <el-select v-model="ruleForm.tags" placeholder="请选择">
              <el-option
                v-for="(item, index) in biaoqianlist"
                :key="index"
                :label="item"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="关键字" class="el_form_item">
            <el-input
              v-model="ruleForm.keyword"
              placeholder="根据题干选择"
            ></el-input>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="试题类型" class="el_form_item">
            <el-select
              v-model="ruleForm.questionType"
              placeholder="请选择"
              class="el_select"
            >
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="难度" class="el_form_item">
            <el-select
              v-model="ruleForm.difficulty"
              placeholder="请选择"
              class="el_select"
            >
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="方向" class="el_form_item">
            <el-select
              v-model="ruleForm.direction"
              placeholder="请选择"
              class="el_select"
            >
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="录入人" class="el_form_item">
            <el-select
              v-model="ruleForm.creatorID"
              placeholder="请选择"
              class="el_select"
            >
              <el-option
                v-for="item in list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="题目备注" class="el_form_item">
            <el-input v-model="ruleForm.remarks"></el-input>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="企业简称" class="el_form_item">
            <el-input v-model="ruleForm.shortName"></el-input>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item label="城市" class="el_form_item">
            <el-select
              v-model="ruleForm.city"
              placeholder="请选择"
              class="el_city"
              @change="changecity"
            >
              <el-option
                v-for="(item, index) in provinces"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="ruleForm.province"
              placeholder="请选择"
              class="el_city cityRight"
            >
              <el-option
                v-for="(item, index) in citys"
                :key="index"
                :label="item"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="el_col">
          <el-form-item>
            <el-button type="primary" class="btn" @click="searchBtn"
              >搜索</el-button
            >
            <el-button class="btn btnright" @click="resetForm">清除</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { simple, detail } from '@/api/hmmm/subjects.js'
import { list } from '@/api/hmmm/questions.js'
import { difficulty, direction, questionType } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'form11',
  data () {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: ''
      },
      options: [],
      list: [
        {
          value: 2,
          label: '超级管理员'
        },
        {
          value: 1,
          label: '录入管理员'
        }
      ],
      xuekelist: [],
      biaoqianlist: [],
      citys: [],
      ruleForm: {
        page: 1,
        pageszie: 5,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        city: null,
        province: null
      },
      ruleForms: {
        page: 1,
        pageszie: 5,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        city: null,
        province: null
      },
      difficulty,
      direction,
      questionType,
      provinces: provinces(),
      newlist: [],
      XueKeId: {},
      contentLists: []
    }
  },
  // 计算属性
  computed: {},
  components: {},
  methods: {
    async getList () {
      try {
        const { data } = await simple()
        this.options = data
      } catch (err) {
        this.$message({
          showClose: true,
          message: '出了个意料之外的错误，不妨喝杯茶稍后重试',
          type: 'error'
        })
      }
    },
    async changeXueke (value) {
      try {
        this.XueKeId.id = value
        const { data } = await detail(this.XueKeId)
        this.xuekelist = data.twoLevelDirectory
        this.biaoqianlist = data.tags
      } catch (err) {
        this.$message({
          showClose: true,
          message: '出了个意料之外的错误，不妨喝杯茶稍后重试',
          type: 'error'
        })
      }
    },
    async changecity (value) {
      try {
        const data = await citys(value)
        this.citys = data
        this.ruleForm.value = ''
      } catch (err) {
        this.$message({
          showClose: true,
          message: '出了个意料之外的错误，不妨喝杯茶稍后重试',
          type: 'error'
        })
      }
    },
    resetForm () {
      this.ruleForm = {
        page: 1,
        pageszie: 5,
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        city: null,
        province: null
      }
      this.contentLists = []
    },
    async searchBtn () {
      try {
        this.ruleForm.page = this.currentPage
        const content = await list()
        const contentList = content.data.items
        if (this.ruleForm.difficulty) {
          for (const item of contentList) {
            for (const key in item) {
              if (
                key === 'difficulty' &&
                item[key] === this.ruleForm.difficulty.toString()
              ) {
                this.contentLists.push(item)
                this.newlist = this.contentLists
              }
            }
          }
        } else if (this.ruleForm.questionType) {
          for (const item of contentList) {
            for (const key in item) {
              if (
                key === 'questionType' &&
                item[key] === this.ruleForm.questionType.toString()
              ) {
                this.contentLists.push(item)
                this.newlist = this.contentLists
              }
            }
          }
        } else {
          const { data } = await list(this.ruleForm)
          this.newlist = data.items
          this.$emit('newList', this.newlist)
        }
        this.$emit('newList', this.newlist)
        this.$message({
          showClose: true,
          duration: 1500,
          message: '搜索成功',
          type: 'success'
        })
        this.contentLists = []
      } catch (err) {
        this.$message({
          showClose: true,
          message: '出了个意料之外的错误，不妨喝杯茶稍后重试',
          type: 'error'
        })
      }
    }
  },
  props: {
    currentPage: {
      type: Number
    }
  },
  // 监听
  watch: {
    // immediate: true 刚加载就进行监听
  },
  created () {
    this.getList()
  },
  mounted () {}
}
</script>

<style scoped lang="scss">
.btn_wrapper {
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 32px;
  margin-bottom: 15px;
  .explain {
    font-size: 12px;
    color: pink;
  }
  .btn_add {
    font-size: 12px;
  }
}
.form {
  .el_form {
    display: flex;
    flex-wrap: wrap;
    .el_col {
      width: 320px;
      height: 50px;
      .btn {
        float: right;
      }
      .btnright {
        margin-right: 15px;
      }
      .el_select,
      .el-select--medium {
        width: 240px;
      }
      .el_city {
        width: 118px;
      }
      .cityRight {
        margin-left: 4px;
      }
    }
  }
}
::v-deep .el-form-item__label,
::v-deep .el-input__inner {
  height: 32px;
}
.el-button--medium {
  font-size: 12px;
  height: 32px;
}
</style>
